<template>
  <div>
    <el-table :data="store.getters['specs/getSpecsList']" border style="width: 100%">
      <el-table-column prop="id" label="规格编号" />

      <el-table-column prop="specsname" label="规格名称"/>
      
      <el-table-column  label="规格属性" >
        <template v-slot="item">
          <div>
            <el-tag type="info" plain v-for="attr in item.row.attrs" :key="attr" size="large" class="tag">{{ attr
            }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="状态">
        <template v-slot="item">
          <el-tag type="success" size="large" plain v-if="item.row.status == 1">启用</el-tag>
          <el-tag type="warning" size="large" plain v-else>禁用</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200px">
        <template v-slot="item">
          <el-button type="primary" @click="edit(item.row.id)">编辑</el-button>
          <el-button type="danger" @click="del(item.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" class="fen" 
     :total="store.getters['specs/getCount']"
     :page-size="store.getters['specs/getSize']" 
     @current-change="change">
        </el-pagination>
  </div>
</template>
<script lang="ts" setup>
import { useStore } from "vuex";
import { specsdelete } from "@/request/api";
import { ElMessage, ElMessageBox } from 'element-plus'
import { defineEmits } from "vue";
let emit = defineEmits(['edit'])
let store = useStore()
let edit = (id: number) => {
  emit("edit",id)
}
const del = (id: number) => {
  ElMessageBox.confirm(
    '删除后不可恢复，是否确认删除？',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      specsdelete({ id }).then(res => {
        if (res.code == 200) {
          get()
          ElMessage({
            type: 'success',
            message: '删除成功！',
          })
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除！',
      })
    })
}



let get = () => {
  store.dispatch("specs/getSpecsListAction")
  store.dispatch("specs/getCountAction")
}
get()
let change = (e:any) =>{
  store.dispatch('specs/changePageAction',e)
}

</script>
<style lang="less" scoped>
.tag{
  margin: 5px 0 0 5px;
}
</style>